<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="维修工单号">{{ form.repairNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.equipmentNum || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.equipmentName || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.model || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.supplierName || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <div
            :style="'color:' + ['#67C23A', '#E6A23C', '#409EFF', '#F56C6C'][form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.status]">
            <i
              :class="['el-icon-circle-check', 'el-icon-warning-outline', 'el-icon-remove-outline', 'el-icon-circle-close'][form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.status]" />
            <span>
              {{ ['正常', '带病运行', '检修中', '故障'][form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.status] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.deptName || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="位置">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.eaPartInfoVo.placeName || '-'
        }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider>故障信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="报修编号">{{ form.sourceNum || '-' }}</el-descriptions-item>
        <el-descriptions-item label="报障时间">{{ form.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="报障人">{{ form.createBy || '-' }}</el-descriptions-item>
        <el-descriptions-item label="故障等级">
          <div :style="'color:' + ['#F56C6C', '#E6A23C', '#409EFF'][form.faultLevel]">
            <span>
              {{ ['紧急 ', '严重 ', '一般'][form.faultLevel] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="分派状态">
          <div :style="'color:' + ['#F56C6C', '#67C23A'][form.assignStatus]">
            <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.assignStatus]" /> -->
            <span>
              {{ ['待分派', '已分派'][form.assignStatus] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="工作状态" :span="2">{{
            form.repairEquipmentAccountVo && form.repairEquipmentAccountVo.userStatusName || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="故障描述">{{ form.faultDescribe || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="故障图片" :span="4" :labelStyle="labelStyle">
          <div v-if="repairImages(form.repairImages, 0).length">
            <Image-preview v-for="(item, i) in repairImages(form.repairImages, 0)" style="margin-left:20px" :key="i"
              :src="item.image" width="100px" height='100px'></Image-preview>
          </div>
          <div v-else style="color: #ccc;">暂无图片信息</div>
        </el-descriptions-item>
        <el-descriptions-item label="故障视频" :span="4" :labelStyle="labelStyle">
          <video v-if="form.faultVideo" :src="form.faultVideo" width="390" height="200" style="background-color: black"
            controls="controls">
            您的浏览器不支持视频播放
          </video>
          <div v-else style="color: #ccc;">暂无视频信息</div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider>处理信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="处理完成时间" :labelStyle="labelStyle">{{ form.repairTime || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="处理人">{{ repairers(form.repairers, 0) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协同处理人">{{ repairers(form.repairers, 1) || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维修方式">
          <div :style="'color:' + ['#67C23A', '#E6A23C'][form.repairMode]">
            <span>
              {{ ['自修', '委外'][form.repairMode] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障类型">{{ form.faultTypeName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="故障原因">{{ form.faultReason || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理结果">
          <div :style="'color:' + ['#67C23A', '#F56C6C'][form.treatmentResult]">
            <i :class="['el-icon-circle-check', 'el-icon-circle-close'][form.treatmentResult]" />
            <span>
              {{ ['已解决', '故障'][form.treatmentResult] || '-' }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="处理内容">{{ form.treatmentContent || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="预防措施" :span="4" :labelStyle="labelStyle">{{ form.precaution || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="维修图片" :span="4" :labelStyle="labelStyle">
          <div v-if="repairImages(form.repairImages, 1).length">
            <Image-preview v-for="(item, i) in repairImages(form.repairImages, 1)" style="margin-left:20px" :key="i"
              :src="item.image" width="100px" height='100px'></Image-preview>
          </div>
          <div v-else style="color: #ccc;">
            暂无图片信息
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="维修视频" :span="4" :labelStyle="labelStyle">
          <video v-if="form.treatmentVideo" :src="form.treatmentVideo" width="390" height="200"
            style="background-color: black" controls="controls">
            您的浏览器不支持视频播放
          </video>
          <div v-else style="color: #ccc;">暂无视频信息</div>
        </el-descriptions-item>
        <el-descriptions-item label="换下配件" :span="4" :labelStyle="labelStyle">{{
            ecrRemoveRecord(form.ecrRemoveRecords, 0) || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="换上配件" :span="4" :labelStyle="labelStyle">
          <div align="left">
            {{ ecrRemoveRecord(form.ecrUseRecords) ||
                '-'
            }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { listDetail } from '@/api/maintenance/management/guySingle.js'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      EquipmentList: [],//相关设备
      MaterialList: [],//相关物料
      //label样式
      labelStyle: { 'width': '405.5px' }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res } = await listDetail(this.parentid);
      this.form = res
    },
    repairers (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return '-'
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data.map(item => item.repairerName).join(',')
    },
    repairImages (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return arr
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data
    },
    ecrRemoveRecord (arr) {
      if (arr == undefined || arr.length == 0) {
        return '-'
      }
      const data = arr.map(item => {
        return item.materialName + '（' + item.materialNum + '）'
      })
      return data.join(',')
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
}

.image_flex {
  display: flex;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
// .dialog_left>div:nth-child(2){
//   flex:10;
//   margin-left:10px
// }
/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.contentStyle {
  width: 200px;
}
</style>